<!--
    *
    * (c) 2010 - 2011 3-launchpad main screen
    * This file is intended to allow the user to browse her music library by source and
    * Also providing options to for lyrics and wikipedia information of the currently played song
    *
-->
<table width="760px" style="border:1px solid gray; display:none" align="center">
    <tr class="default" ><td width="34px">
            <img src="img/3-launchpad.png"/>
        </td>
        <td class="caption">
            <div style="float:left; width:100%">Music Central</div>
            <div class="small" style="float:left;font-weight:normal">Manage your music library; Playlist; Lyrics and more ...</div>
            
        </td>
    </tr>
</table>


<table id="browsing" width="" align="center"  class ="" style="width:760px;height:270px; border:1px solid gray" cellspacing="1px">
<tr class="default">
    <td  class="width:18px" valign="middle" class="">

        <div><input type="image" src="img/default/arrow-prev.png" onclick="library.nav.back()"/></div>
    </td>
    <td  valign="top" align="center" >
        <div style="" class="library ">
        <div id="lib_panel" style="" align="center" >
            <div id="library.playlist" class="library-panel " align="left">
                <table>
                    <tr class="default">
                        <td width="34px">
                            <img src="img/gnomefoot.png"/>
                        </td>
                        <td valign="top">
                            <div class="nytimes"><b>Now Playing</b></div>
                            <div class="small" style="float:left">Manage the current playlist</div>
                            
                        </td>
                    </tr>
                </table>
                <div class="library-innerpanel" style="width:49%; float:left;display:none">
                    <div align="center"><b>Artist Album</b></div>

                    <div id="now.playing.artist" align="center" style="width:100%; height:195px; overflow:auto; float:left; ">

                    </div>
                </div>
               <div style="margin-left:2px;" class="library-innerpanel">
                   
                    <div id="now.playing" style="margin:1px; height:195px; overflow:auto"></div>
                </div>
            </div>
            <div  class="library-panel">
                
                <table width="100%">
                    <tr class="default">
                        <td style=" width:34px">
                            <img src="img/default/mysongs.png"/>
                        </td>
                        <td>
                            <div class="nytimes"><b>Music Library Browsing</b></div>
                            <div class="small">Manage; Search your music library</div>
                        </td>
                    </tr>
                </table>
                <div class="library-innerpanel">
                    <div style="margin-top:3px;" align="right">
                        
                            <input id="library.search" style=" width:95%;" onkeyup="search('library.search','library.songs')"/>
                            <span style="margin:3px; float:right" class="action" onclick="jx.dom.set.value('library.search',''); search('library.search','libray.songs'); jx.dom.set.focus('library.search')">&lsaquo;&lsaquo;&nbsp;</span>

                        
                    </div>
                    <div  align="left" id="library.grid" style="width:98%;overflow:auto; height:187px; margin-top:3px;padding:2px">
                        oops;
                    </div>
                </div>
            </div>
            <div id="library.lyrics" class="library-panel" style="display:none">
                <table width="100%">
                    <tr class="default">
                         <td style="float:left; width:34px">
                            <img src="img/default/lyrics.png"/>
                        </td>
                        <td style="float:none;" align="left">
                            <div class="caption" style="float:none; width:100%">Lyrics</div>
                            <div class="small" style=" float:none; width:100%">music lyrics from wikilyrics</div>
                        </td>
                    </tr>
                </table>
                <div id="track.lyric" class="library-innerpanel"></div>
            </div>
            <div id="library.wiki" class="library-panel">
                <table width="100%">
                    <tr class="default">
                         <td style=" width:34px;">
                            <img src="img/default/lastfm.png" />
                        </td>
                        <td style="" align="left">
                            <div class="caption" style="float:none; width:100%">Information; news & events</div>
                            <div class="small" style=" float:none; width:100%">Miscellaneous  from miscellaneous sources</div>
                        </td>
                    </tr>
                </table>
                <div width="100%">
                    <div style="float:left; width:34px;">
                        <input type="image" src="img/default/wiki.png" style="border:1px solid #d3d3d3; margin:1px" onclick="jx.dom.hide('library.artist.events.panel'); jx.dom.show('library.artist.bio.panel')"/>
                        <input type="image" src="img/default/calendar.png" style="margin:1px;border:1px solid #d3d3d3;" onclick="jx.dom.hide('library.artist.bio.panel'); jx.dom.show('library.artist.events.panel')"/>
                    </div>
                    <div id="library.artist.bio.panel" align="left" class="library-innerpanel" style=" float:left;width:637px;margin-left:2px" >
                        <b>&nbsp;Artist Biography (wiki)</b>
                        <div id="library.artist.bio" class="nytimes"></div>
                    </div>
                    <div id="library.artist.events.panel" align="left" style="float:left;width:637;margin-left:2px; display:none" class="library-innerpanel">
                        
                        <div class="default" style="font-weight:bold">&nbsp;Artist Calendar</div>
                        <div class="default" style="">&nbsp;Events, Tours & Concerts</div>
                        <div id="library.artist.events" class="default"></div>
                    </div>
                </div>
            </div>
            <div id="library.news" class="library-panel">
                <table width="100%">
                    <tr class="default">
                         <td style=" width:34px">
                            <img src="img/default/twitter.png"/>
                        </td>
                        <td style="" align="left">
                            <div class="caption" style="float:none; width:100%">Twitter as news central</div>
                            <div class="small" style=" float:none; width:100%">Be the first to know about 3-launchpad, the current artist...</div>
                        </td>
                    </tr>
                </table>
                <div width="100%">
                    <div style="float:left;width:34px">
                        
                        <input type="image" src="img/default/tweet.png" style="border:1px solid #d3d3d3" onclick="twitter.search('artist.tweets',jx.dom.get.value('artist')) ; jx.dom.hide('library.tweets.panel'); jx.dom.show('artist.tweets.panel')"/>
                        <input type="image" src="img/default/news.png" style="border:1px solid #d3d3d3; margin:1px" onclick="twitter.getTweets('3launchpad','library.tweets') ;jx.dom.hide('artist.tweets.panel'); jx.dom.show('library.tweets.panel')"/>
                    </div>
                    <div id="artist.tweets.panel"style="float:left;width:637px; margin-left:2px" align="left" class="library-innerpanel">
                        <div><b>Tweets about <span id="current.artist.tweets"></span></b></div>
                        
                        <div id="artist.tweets" align="left" class="default">
                            
                        </div>
                    </div>
                    <div id="library.tweets.panel"align="left" style="float:left;width:637px;margin-left:2px; display:none" class="library-innerpanel">
                        <div><b>Tweets from us</b></div>
                        
                        <div id="library.tweets" align="left" class="default"></div>
                    </div>
                </div>
            </div>

        </div>
        </div>
    </td>
    <td width="18px" align="center" valign="middle" class="">
        
        <div> <input type="image" src="img/default/arrow-next.png" onclick="library.nav.next()"/></div>
        
    </td>
</tr>
</table>

<div id="id3handler" style="padding:2px; background-color:white; position:absolute; z-index:5;width:0%;overflow:hidden; margin-left:20%; height:130px; margin-top:-35%; display:none; border:2px double gray">
    <div class="shaded-dark" style="border-bottom:1px solid gray"> <b>MP3 Tag Handling</b>
        
    </div>
    ..::: <span class="small" id="id3.file" style="color:maroon"></span>
    <span style="display:none" id="id3.index"></span>
    <table>
        <tr class="default">
            <td>Artist</td>
            <td><input id="id3.artist" class="default"/></td>
            <td rowspan="3" valign="top">
                If the file doesn't have the appropriate tags please help us check if this artist/album is available.
            </td>
        </tr>
        <tr class="default">
            <td>Song</td>
            <td><input id="id3.song" class="default"/></td>
        </tr>
        <tr class="default">
            <td>Album</td>
            <td><input id="id3.album" class="default"/></td>
        </tr>        
    </table>
    <div align="center" style="border-top:1px solid gray; background-color:white">

        <input type="button" value="Ok" class="default-button" onclick="jx.dom.hide('id3handler'); library.setId3Info()"/>
    </div>
</div>